<template>
  <el-form
    :model="{}"
    :rules="{}"
    label-position="right"
    status-icon
    v-loading="loading"
  >
    <div class="pr-lg pl-lg pb-lg pt-30">
      <c-main-template minHeight="auto" title="基本信息" :isBreadcrumb="false">
        <el-row :gutter="24" class="pd-lg" v-if="sellerCarOutApply">
          <!-- <el-alert
          title="平台审核中，请耐心等待。"
          type="warning"
          show-icon
        /> -->
          <el-col :span="8">
            <el-form-item label="出口申请单号：">
              <span>{{ sellerCarOutApply.id }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出口国家：">
              <span>{{ sellerCarOutApply.endHarborCountry }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="启运港：">
              <span>{{ sellerCarOutApply.startHarborName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的港：">
              <span>{{ sellerCarOutApply.endHarborName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </c-main-template>
      <c-main-template
        v-if="outCarList.length > 0"
        minHeight="auto"
        class="mt-lg"
        title="出口车辆基本信息"
        :isBreadcrumb="false"
      >
        <div class="pd-lg">
          <c-table-template border :data="outCarList">
            <el-table-column align="left" label="车辆信息">
              <template #default="scope">
                <span v-for="(item, index) in k" :key="index">
                  {{ scope.row[item] }}&nbsp;
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价（元）">
              <template #default="scope">
                {{ filters.thousands(scope.row.price) }}
              </template>
            </el-table-column>
            <el-table-column prop="vin" align="center" label="车架号">
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template #default="scope">
                <el-button
                  link
                  class="mr-sm"
                  type="primary"
                  size="small"
                  v-if="scope.row.carFiles"
                  @click="onFileOpen(scope.row.carFiles)"
                >
                  <span>查看出口手续</span>
                </el-button>
              </template>
            </el-table-column>
          </c-table-template>
          <div class="car-info_footer">
            合计: 共计 {{ outCarList.length }} 辆车
          </div>
        </div>
      </c-main-template>
      <c-main-template
        v-if="billList.length > 0"
        minHeight="auto"
        class="mt-lg"
        title="支付金额信息"
        :isBreadcrumb="false"
      >
        <div class="pd-lg">
          <el-row :gutter="24" v-for="(item, index) in billList" :key="index">
            <el-col :span="8">
              <el-form-item
                :label="`${getStatusLabel(expenseType, item.type)}：`"
              >
                {{ filters.thousands(item.amount) }} 元
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="公式：" v-if="item.expression">
                {{ item.expression }}
                <!-- 只有保证金展示查看 -->
                <c-voucher-details :list="carDetails" v-if="item.type === 10" />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="item.payProofUrl">
              <el-form-item label=" ">
                <el-button
                  type="primary"
                  link
                  @click="onFileOpen(item.payProofUrl)"
                  >查看保证金支付凭证</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
      <c-main-template
        v-if="transport"
        minHeight="auto"
        class="mt-lg"
        title="出口信息"
        :isBreadcrumb="false"
      >
        <el-row :gutter="24" class="pd-lg">
          <el-col :span="8">
            <el-form-item label="海运提单号：">
              <span>{{ transport.seaBillNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="船名：">
              <span>{{ transport.shipName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="航次：">
              <span>{{ transport.shipNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计到港日期：">
              <span>
                {{ filters.dateYMDFormat(transport.estimateArrivalDate) }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出口日期：">
              <span> {{ filters.dateYMDFormat(transport.exportDate) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="pl-0">
            <el-row :gutter="24">
              <el-col
                :span="8"
                v-for="(item, index) in getExportFiles(
                  transportFiles,
                  transport.carOutApplyId,
                  [1]
                )"
                :key="index"
              >
                <el-form-item :label="`${item.label}：`">
                  <span class="pointer c-blue" @click="onFileOpen(item.list)"
                    >查看</span
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <!-- <div class="el-form-item__label mb-sm">集装箱信息</div> -->
            <c-table-template border :data="transportList">
              <el-table-column align="center" label="集装箱号" prop="no">
              </el-table-column>
              <el-table-column
                align="left"
                label="车辆信息"
                prop="carInfo"
                width="350"
              >
                <template #default="scope">
                  <div
                    v-for="(item, index) in scope.row.carInfoList"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车架号">
                <template #default="scope">
                  <div v-for="(item, index) in scope.row.vinList" :key="index">
                    {{ item }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="集装箱尺寸">
                <template #default="scope">
                  <div>{{ scope.row.size }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="重量/KG">
                <template #default="scope">
                  {{ scope.row.weight }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="装箱照片">
                <template #default="scope">
                  <span
                    class="pointer c-blue"
                    @click="onFileOpen(scope.row.packingPicList)"
                    >查看</span
                  >
                </template>
              </el-table-column>
            </c-table-template>
            <div class="car-info_footer">
              <span
                >合计: {{ transportList.length }} 个集装箱，共计
                {{ getContainerCarNums }} 台</span
              >
            </div>
          </el-col>
        </el-row>
      </c-main-template>
    </div>
  </el-form>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getExportFiles, onFileOpen } from "@/utils/index.js";
import { expenseType, getStatusLabel } from "@/utils/status.js";
import cVoucherDetails from "@/components/PaymentDetails/index.vue";
const { proxy } = getCurrentInstance();
const k = ["brand", "series", "model"];
const loading = ref(false);
const sellerCarOutApply = ref(null); //基本信息
const outCarList = ref([]); //车辆基本信息
const billList = ref([]); //支付金额信息
const transport = ref(null); //海运单
const transportFiles = ref([]); //海运单箱单等文件
const transportList = ref([]); // 集装箱信息
const carDetails = ref([]); //保证金明细
const route = useRoute();
onMounted(() => getById());

const getContainerCarNums = computed(() => {
  const number = (transportList.value || [])
    .map((x) => {
      return (x.vinList || []).length;
    })
    .reduce((x, y) => {
      return x + y;
    }, 0);
  return number;
});
const getById = async () => {
  const url = "/sellerCarOutApply/getById";
  const id = route.query.id;
  const params = {
    id,
  };
  if (id) {
    loading.value = true;
    const res = await proxy.$get({ url, params });
    sellerCarOutApply.value = res.sellerCarOutApply;
    outCarList.value = res.outCarList;
    billList.value = res.billList;
    transport.value = res.transportList;
    transportFiles.value = res.transportFiles;
    transportList.value = res.transportContainerList;
    const d = await proxy.$get({
      url: "/sellerCarInApply/carDetailsOut",
      params,
    });
    carDetails.value = d;
    loading.value = false;
  }
};
</script>
<style lang="less" scoped>
.car-info_footer {
  padding: 11px 16px;
  background: #f1f1f1;
  font-size: 14px;
  color: #575757;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #202020;
  margin-bottom: 20px;
}
</style>